<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">


    <head th:include="common/common::header">
    </head>

<body>
<div class="x-nav">
		<span class="layui-breadcrumb"> <a href="">首页</a> <a href="">演示</a>
			<a> <cite>导航元素</cite>
		</a> </span> <a class="layui-btn layui-btn-small"
                        style="line-height:1.6em;margin-top:3px;float:right"
                        href="javascript:location.replace(location.href);" title="刷新">
    <i class="layui-icon" style="line-height:30px">&#xe666</i>
</a>
</div>
<!----------------------------查询条件------------------------------------>
<blockquote shiro:hasPermission="user_list" class="layui-elem-quote news_search">
    <form class="layui-form" action="">
    <div class="layui-inline">
        <label class="layui-form-label">姓名：</label>
        <div class="layui-input-inline"  >
            <input type="text" value="" placeholder="请输入用户姓名" id="name" name="name"
                   class="layui-input search_input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label" style="width: 70px">房间号：</label>
        <div class="layui-input-inline">
            <input type="text" value="" placeholder="请输入房间号" id="roomNo1" name="roomNo"
                   class="layui-input search_input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">入住日期：</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="startTime1" name="startTime"  placeholder="请选择要开始的时间">
        </div>
        --
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="endTime1" name="endTime"  placeholder="请选择要结束的时间">
        </div>

    </div>
    <div class="layui-inline">
        <label class="layui-form-label">类型：</label>
        <div class="layui-input-inline">
            <select name="roomType" id="roomType1" >
                <option value="">请选择房间类型</option>
                <option value="0">女寝</option>
                <option value="1">男寝</option>
                <option value="2">空闲</option>
            </select>
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">大小：</label>
        <div class="layui-input-inline">
            <select name="roomSize" id="roomSize1" lay-verify="">
                <option value="">请选择房间大小</option>
                <option value="8">八人间</option>
                <option value="10">十人间</option>

            </select>
        </div>
    </div>

    <div class="layui-input-inline"  >
        <a class="layui-btn search_btn" onclick="searchBy()">查询</a>
    </div>
    </form>

</blockquote>

<!------------------------------弹出层的详细信息-------------------------------------->
    <div class="x-body" style="display:none;" id="lookDetail">
        <form class="layui-form" id="addform" lay-filter="test1">
            <div class="layui-form-item">
                <label for="id" class="layui-form-label"> 用户编号 <span class="x-red">*</span></label>
                <div class="layui-input-inline">
                    <input type="text" id="id" name="id" disabled
                           autocomplete="off" class="layui-input">
                </div>
                <label for="name" class="layui-form-label"> 用户姓名<span class="x-red">*</span> </label>
                <div class="layui-input-inline">
                    <input type="text" id="uname" name="name" disabled
                           autocomplete="off" class="layui-input">
                </div>

            </div>
            <div class="layui-form-item">
                <label for="username" class="layui-form-label"> 用户账号 <span class="x-red">*</span></label>
                <div class="layui-input-inline">
                    <input type="text" id="username" name="username"
                           autocomplete="off" class="layui-input" disabled>
                </div>
                <label for="payphone" class="layui-form-label"> 支付宝账号 <span class="x-red">*</span></label>
                <div class="layui-input-inline">
                    <input type="text" id="payphone" name="payphone"
                           autocomplete="off" class="layui-input" disabled>
                </div>

            </div>
            <div class="layui-form-item">
                <label for="userSex" class="layui-form-label"> 性别 <span class="x-red">*</span></label>
                <div class="layui-input-inline">
                    <input type="text" id="userSex" name="userSex" disabled
                           lay-verify="number" autocomplete="off" class="layui-input">
                </div>
                <label for="userCard" class="layui-form-label"> 身份证号<span class="x-red">*</span> </label>
                <div class="layui-input-inline">
                    <input type="text" id="userCard" name="userCard" disabled
                           lay-verify="number" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="startTime" class="layui-form-label"> <span
                        class="x-red"></span>入住时间 <span class="x-red">*</span></label>
                <div class="layui-input-inline">
                    <input type="text" id="startTime" name="startTime" disabled
                           autocomplete="off" class="layui-input">
                </div>
                <label for="endTime" class="layui-form-label"> <span
                        class="x-red"></span>到期时间 <span class="x-red">*</span></label>
                <div class="layui-input-inline">
                    <input type="text" id="endTime" name="endTime" disabled
                           autocomplete="off" class="layui-input">
                </div>

            </div>
            <div class="layui-form-item">
                <label for="roomNumber" class="layui-form-label"> 房间号<span class="x-red">*</span> </label>
                <div class="layui-input-inline">
                    <input type="text" id="roomNumber" name="roomNo" disabled
                           lay-verify="number" autocomplete="off" class="layui-input">
                </div>
                <label for="bedNum" class="layui-form-label"> 床位号<span class="x-red">*</span> </label>
                <div class="layui-input-inline">
                    <input type="text" id="bedNum" name="bedNum" disabled
                           lay-verify="number" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="roomType" class="layui-form-label"> 房间类型<span class="x-red">*</span> </label>
                <div class="layui-input-inline">
                    <input type="text" id="roomType" name="roomType" disabled
                           lay-verify="number" autocomplete="off" class="layui-input">
                </div>
                <label for="roomSize" class="layui-form-label"> 房间大小 <span class="x-red">*</span></label>
                <div class="layui-input-inline">
                    <input type="text" id="roomSize" name="roomSize" disabled
                           lay-verify="number" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="deposit" class="layui-form-label"> 交纳押金<span class="x-red">*</span> </label>
                <div class="layui-input-inline">
                    <input type="text" id="deposit" name="deposit" disabled
                           lay-verify="number" autocomplete="off" class="layui-input">
                </div>
                <label for="payType" class="layui-form-label"> 交租方式 <span class="x-red">*</span></label>
                <div class="layui-input-inline">
                    <input type="text" id="payType" name="payType" disabled
                           lay-verify="number" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="userAddr" class="layui-form-label"> 个人所在地 <span class="x-red">*</span></label>
                <div class="layui-input-inline">
                    <input type="text" id="userAddr" name="userAddr" disabled
                           lay-verify="number" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" style="margin:15px 0 0 400px">返回</button>

                </div>
            </div>
        </form>
    </div>
    <table shiro:hasPermission="user_list" id="demo" lay-filter="look"></table>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="lookDetail">查看详情</a>

    </script>
<script>
    layui.use('laydate', function() {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#startTime1'
            , type: 'datetime'
        });
        laydate.render({
            elem: '#endTime1'
            , type: 'datetime'
        });
    })

</script>
    <script th:inline="none">
        layui.use(['table','form'], function(){
            var table = layui.table;
            var form = layui.form;
            <!---------------------重载实现模糊查询---------------- -->
            window.searchBy = function() {
                var name = $("#name").val();
                var roomNo = $("#roomNo1").val();
                var startTime = $("#startTime1").val();
                var endTime = $("#endTime1").val();
                var roomType = $("#roomType1").val();
                var roomSize = $("#roomSize1").val();
                table.reload('demo', {
                    url : '/dangxia/user/getAll',
                    method : 'post',
                    where : {
                        name:name,
                        roomNo:roomNo,
                        startTime:startTime,
                        endTime:endTime,
                        roomType:roomType,
                        roomSize:roomSize
                    }
                });

            }
            //第一个实例
            table.render({
                elem: '#demo'
                ,height: 500
                ,url: '/dangxia/user/getAll' //数据接口
                ,page: true
                ,initSort:{
                    field:'id',

                    type:'desc'
                }
                ,cols: [[
                    {field: 'id', title: 'ID', width:100,sort: true}
                    ,{field: 'name', title: '姓名', width:120 }
                    ,{field: 'userSex', title: '性别', width:120,templet:function (f) {
                            if (f.userSex == 0){
                                return  '女';
                            } else{
                                return '男';
                            }
                        } }
                    ,{field: 'payphone', title: '支付宝账号', width:150 }
                    ,{field: 'startTime', title: '入住时间', width:200 ,sort: true}
                    ,{field: 'endTime', title: '到期时间', width:200 ,sort: true}
                    ,{field: 'roomNo', title: '入住房间', width:150 ,sort: true}
                    ,{field: 'bedNum', title: '房间床位', width:150 ,sort: true}
                    ,{field: 'roomSize', title: '房间大小', width:150 ,sort: true, templet:function (f) {
                            if (f.roomSize==8){
                                return '八人间';
                            } else {
                                return '十人间';
                            }
                        }}
                    ,{field: 'roomType', title: '房间类型', width:150,templet:function(f) {
                        if (f.roomType == 0){
                            return '女寝';
                        } else {
                            return '男寝';
                        }
                    } }
                    ,{field: 'operation', title: '操作', width:196 ,align:'center',toolbar: '#barDemo'}

                ]]
            });
            table.on('tool(look)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象

                if(layEvent === 'lookDetail'){ //查看
                    $.post('/dangxia/user/getInfoById',{
                        id:data.id
                    },function (data) {
                        $("#id").val(data.id);
                        $("#uname").val(data.name);
                        $("#username").val(data.username);
                        $("#userAddr").val(data.userAddr);
                        $("#userCard").val(data.userCard);
                        $("#deposit").val(data.deposit);
                        $("#payphone").val(data.payphone);
                        $("#startTime").val(data.startTime);
                        $("#endTime").val(data.endTime);
                        $("#payType").val(data.payType);
                        $("#roomNumber").val(data.roomNo);
                        $("#roomType").val(data.roomType);
                        $("#roomSize").val(data.roomSize);
                        $("#bedNum").val(data.bedNum);
                        if (data.userSex==0) {
                            $("#userSex").val('女');
                        } else {
                            $("#userSex").val('男');
                        };
                        if (data.roomType==0) {
                            $("#roomType").val('女寝');
                        } else {
                            $("#roomType").val('男寝');
                        };
                        if (data.roomSize==8) {
                            $("#roomSize").val('八人间');
                        } else {
                            $("#roomSize").val('十人间');
                        };
                        if (data.payType==0) {
                            $("#payType").val('每月按时交租');
                        } else {
                            $("#payType").val('五月内免租');
                        };


                    });

                    layer.open({
                        type : 1,
                        title : '查看详情',

                        shade : [ 0.3, '#393D49' ],
                        maxmin : false,
                        shadeClose : false,
                        area : [ '700px', '580px' ],
                        content : $("#lookDetail")//这里需要公告查看子页面，传id在弹窗打开
                        ,
                        success : function(layero, index) {
                            console.log(layero, index);
                        }

                    });
                }
            });
        });
    </script>
</body>
</html>